<template>
  <el-container>
    <aside-layout></aside-layout>
    <el-main>
      <div class="page-container">
        <h1><i class="el-icon-document"></i> 消费记录</h1>
        <el-form :inline="true" :model="filterData" class="filter-form">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="filterData.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="消费类型">
            <el-select v-model="filterData.type" placeholder="请选择消费类型">
              <el-option label="全部" value=""></el-option>
              <el-option label="餐饮" value="dining"></el-option>
              <el-option label="购物" value="shopping"></el-option>
              <el-option label="其他" value="other"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterRecords">筛选</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="filteredRecords" style="width: 100%">
          <el-table-column prop="date" label="日期" width="150" />
          <el-table-column prop="type" label="类型" width="120" />
          <el-table-column prop="amount" label="金额" width="100" />
          <el-table-column prop="description" label="描述" />
        </el-table>

        <!-- 新模块：消费统计 -->
        <div class="card consumption-stats">
          <h2><i class="el-icon-pie-chart"></i> 消费统计</h2>
          <p>总消费金额: ¥{{ totalConsumption }}</p>
          <p>本月消费金额: ¥{{ monthlyConsumption }}</p>
          <div ref="chart" class="chart"></div>
        </div>

        <!-- 新模块：常见问题 -->
        <div class="card faq">
          <h2><i class="el-icon-question"></i> 常见问题</h2>
          <ul>
            <li v-for="(question, index) in faqs" :key="index">
              <i class="el-icon-info"></i> {{ question }}
            </li>
          </ul>
        </div>

        <!-- 新模块：用户反馈 -->
        <div class="card feedback">
          <h2><i class="el-icon-message"></i> 用户反馈</h2>
          <el-input type="textarea" v-model="userFeedback" placeholder="请留下您的反馈" />
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AsideLayout from '@/layout/asideLayout.vue';
import * as echarts from 'echarts';

export default {
  name: 'ConsumptionRecords',
  components: {
    AsideLayout
  },
  data() {
    return {
      filterData: {
        dateRange: [],
        type: ''
      },
      records: [
        { date: '2023-10-01', type: 'dining', amount: '¥100', description: '午餐' },
        { date: '2023-10-02', type: 'shopping', amount: '¥200', description: '超市购物' },
        { date: '2023-10-03', type: 'other', amount: '¥50', description: '其他消费' },
        // 更多记录可以在这里添加
      ],
      filteredRecords: [],
      totalConsumption: 350,
      monthlyConsumption: 350,
      faqs: [
        '如何查看消费记录？',
        '消费记录可以导出吗？',
        '如何筛选特定日期的消费记录？'
      ],
      userFeedback: ''
    };
  },
  mounted() {
    this.filteredRecords = this.records;
    this.initChart();
  },
  methods: {
    filterRecords() {
      this.filteredRecords = this.records.filter(record => {
        const [start, end] = this.filterData.dateRange;
        const recordDate = new Date(record.date);
        const isWithinDateRange = (!start || recordDate >= new Date(start)) && (!end || recordDate <= new Date(end));
        const isTypeMatch = !this.filterData.type || record.type === this.filterData.type;
        return isWithinDateRange && isTypeMatch;
      });
    },
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: '消费统计'
        },
        tooltip: {},
        xAxis: {
          data: ['餐饮', '购物', '其他']
        },
        yAxis: {},
        series: [{
          name: '金额',
          type: 'bar',
          data: [100, 200, 50]
        }]
      };
      chart.setOption(option);
    },
    submitFeedback() {
      if (this.userFeedback) {
        this.$message.success('感谢您的反馈！');
        this.userFeedback = '';
      } else {
        this.$message.error('请填写反馈内容');
      }
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.filter-form {
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.filter-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

h1 i, h2 i {
  margin-right: 10px;
  color: #409EFF;
}

.el-button {
  transition: background-color 0.3s, transform 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.el-input, .el-select, .el-date-picker {
  transition: border-color 0.3s;
}

.el-input:focus, .el-select:focus, .el-date-picker:focus {
  border-color: #409EFF;
}

.el-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.el-table th, .el-table td {
  transition: background-color 0.3s;
}

.el-table th:hover, .el-table td:hover {
  background-color: #f2f6fc;
}

.chart {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}
</style> 